<template>
    <a-radio-group :value="modelValue" @change="update">
        <template v-for="(item, index) in rendererList" :key="index">
            <a-tooltip placement="top">
                <template #title>
                    <span>{{ item.desc }}</span>
                </template>
                <a-radio :value="item.value">{{ item.value }}</a-radio>
            </a-tooltip>
        </template>
    </a-radio-group>
</template>

<script setup lang="ts">
import type { EchartsRenderer } from '@/views/dataview/setting/chartTheme';
import { reactive, ref } from 'vue';

const INHERIT_VALUE = ref("inherit")

const props = withDefaults(defineProps<{
    includeInherit?: Boolean,
    modelValue?: EchartsRenderer
}>(), {})


const emits = defineEmits<{
    (e: "update:modelValue", val: any): void
}>()

const update = (e: any) => {
    console.log(e.target);
    
    emits('update:modelValue',e.target.value)
}

const rendererList = reactive([
    {
        value: 'svg',
        desc: '在缩放场景下具有更好的表现'
    },
    {
        value: 'canvas',
        desc: '数据量较大（经验判断 > 1k）、较多交互时，建议选择'
    },
    ...(props.includeInherit
        ? [
            {
                value: INHERIT_VALUE.value,
                desc: '默认继承全局配置'
            }
        ]
        : [])
])
</script>

<style lang='scss' scoped></style>